// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../../common/styles/colors.scss';

@mixin title-border {
    border: 1px $neutral-alpha-90 solid;
    border-radius: 2px;
}

.switcher-dropdown-option {
    display: flex;
    flex-direction: row;

    i {
        margin-right: 8px;
    }
}

// The two layers of class selector and the explicit enumeration of the states are both
// required to beat the specificity of office fabric styles
.left-nav-switcher .left-nav-switcher-dropdown {
    margin: 8px;

    &,
    &:focus,
    &:hover,
    &:active,
    &:hover:active {
        :global(.ms-Dropdown-title) {
            @include title-border;

            background-color: $neutral-0;
            height: 32px;
            box-sizing: border-box;
            width: inherit;
            color: $neutral-alpha-90;

            i {
                margin-right: 8px;
            }
        }

        :global(.ms-Dropdown-caretDownWrapper) {
            top: 2px;
            right: 18px;
        }

        :global(.ms-Dropdown-caretDown) {
            color: $neutral-alpha-90;
        }
    }

    :global(.ms-Dropdown):focus::after {
        @include title-border;

        outline: 1px $neutral-alpha-90 solid;
        outline-offset: -5px;
    }
}
